<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">  
    <style>
        .swiper {
            margin-top: 20px;
            width: 100%;
            height: 350px;
            z-index: 0;
        }
        .swiper-slide img {
            height: 100%;
            width: 100%;
            display: block;
        }
        .swiper-button-prev,
        .swiper-button-next {
            background-color: #eeeeeea5;
            color: black;
        }
    </style>
</head>
<body>

    <header>
        <h2>闪购</h2>
        <p class="top">首页</p>
        <p class="top">购物车<span></span></p>
        <p class="user">欢迎：</p>
        <p class="top">退出登录</p>
    </header>

    <main>

        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/swiper1.jfif"></div>
                <div class="swiper-slide"><img src="./images/swiper2.jfif"></div>
                <div class="swiper-slide"><img src="./images/swiper3.jfif"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>

        <!-- 限时秒杀 -->
        <div class="seckill">
            <div class="title">
                <h3>限时秒杀</h3>
                <div class="time">
                    <span>距开始：</span>
                    <span id="h">99</span>
                    <span>时</span>
                    <span id="m">99</span>
                    <span>分</span>
                    <span id="s">99</span>
                    <span>秒</span>
                </div>
            </div>
            <hr>
            <!-- 秒杀商品 -->
            <ul></ul>
        </div>

        <!-- 热门商品 -->
        <div class="hot">
            <h3>热门商品</h3>
            <hr>
            <ul></ul>
        </div>
    </main>

    <footer>&copy; 2025&nbsp;&nbsp;闪购</footer>


    <script src="./js/index_seckill.js"></script>
    <script src="./js/index_hot.js"></script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>
    <script>
        var mySwiper = new Swiper ('.swiper', {
            loop: true, // 循环模式选项
            autoplay: {
                delay: 3000,
                disableOnInteraction: false, // 禁止用户操作后自动切换
            },
        
            // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            },
            
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            },
        })

        //显示用户名
        const username = document.querySelector('.user');
        name = localStorage.getItem('currentUser');
        username.innerHTML = `欢迎：${name}`;

        //退出登录
        const logout = document.querySelector('.top:last-child');
        logout.addEventListener('click', function() {
            localStorage.removeItem('currentUser');
            location.href = 'login.html';
        });

        //购物车
        const cart = document.querySelector('.top:nth-child(3)');
        cart.addEventListener('click', function() {
            location.href = 'car.html';
        });
    </script>
</body>
</html>